<template>
  <div class="localImg">
    <el-upload
      class="elImgUpload"
      action="api/savepicture.php"
      list-type="picture-card"
      :file-list="fileList2"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-progress="handleProgress"
      :limit="2"
      accept="image/jpeg, image/jpg, image/png"
      :data="imgData"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
import { method } from '../../assets/js/alert'

export default {
  name: 'localImg',
  data () {
    return {
      uploadImg: '上传图片',
      uploadMov: '上传视频',
      dialogImageUrl: '',
      dialogVisible: false,
      imgData: {
        name: ''
      },
      fileList2: []
    }
  },
  created () {
    method()
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file, fileList) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      console.log('handlePictureCardPreview', file)
    },
    beforeAvatarUpload (file) {
      var testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2
      this.imgData.name = file.name
      console.log('file', file)
      if (!testmsg) {
        alert('上传图片只能是 jpg/png/gif 格式!')
        // this.$message.error('上传图片只能是 jpg/png/gif 格式!')
      }
      if (!isLt2M) {
        alert('上传图片大小不能超过 2MB!')
        // this.$message.error('上传图片大小不能超过 2MB!')
      }
      return testmsg && isLt2M
    },
    handleAvatarSuccess (res, file) {
      var imageUrl = URL.createObjectURL(file.raw)
      console.log('ok', res)
      console.log('imageUrl', imageUrl)
    },
    handleProgress (file, fileList) {
      console.log('handleProgress', fileList)
    }
  }
}
</script>

<style scoped>
.localImg {
  height: 1308px;
  width: 750px;
  background-color: #f5f5f5;
}
.elImgUpload {
  display: flex;
  justify-content: center;
  margin-top: 151px;
}
</style>
<style>
.el-upload--picture-card {
  width: 228px;
  height: 228px;
  line-height: 228px;
  background-color: #dbdbdb;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 228px;
  height: 228px;
}
</style>
